<template>
  <div class="line-setting">
      <el-form ref="lineSetting" :model="setting" label-position="top"  style="height:auto;">
        <el-form-item :label="$t('custom.component.gadget.lineTitle')">
            <el-input v-model="setting.title" :placeholder="$t('custom.component.gadget.lineTitlePlaceholder')" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="setting.isCumulative" :disabled="Boolean(setting.valueFieldsNameMeasureGroup)" >{{$t('custom.component.gadget.cumulative')}}</el-checkbox>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.dimension')">
          <el-select v-model="setting.valueFieldsNameMeasureX" :placeholder="$t('custom.component.gadget.dimensionPlaceholder')" style="width:80%;">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="setting.manyMeasure" :disabled="Boolean(setting.valueFieldsNameMeasureGroup)" @click.native="changeManyMeasure(setting.manyMeasure)">{{$t('custom.component.gadget.multipleMeasure')}}</el-checkbox>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.setgoal')">
            <el-input v-model="setting.goal" :placeholder="$t('custom.component.gadget.setgoalPlaceholder')" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.setgoalcolor')">
            <el-color-picker size="small" v-model="setting.goalcolor" color-format="hex" :predefine="predefineColors"></el-color-picker>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="setting.smooth">{{$t('custom.component.gadget.setsmooth')}}</el-checkbox>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.measure')">
          <el-select v-if="setting.manyMeasure" v-model="setting.valueFieldsNameManyY" style="width:80%;" multiple  clearable  collapse-tags :placeholder="$t('custom.component.gadget.measurePlaceholder')">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
            <el-select v-else v-model="setting.valueFieldsNameMeasureY" style="width:80%;" :placeholder="$t('custom.component.gadget.measurePlaceholder')">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.dimensionGroup')">
          <el-select v-model="setting.valueFieldsNameMeasureGroup" clearable style="width:80%;" @change="groupChange" :placeholder="$t('custom.component.gadget.groupPlaceholder')">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.showTrendLine')">
          <el-select clearable size="small" :disabled="setting.valueFieldsNameMeasureGroup || setting.manyMeasure" v-model="setting.showTrendLine" :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in trendLineList" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.dimensionName')">
            <el-input v-model="setting.xName" :placeholder="$t('custom.component.gadget.lineXNamePlaceholder')" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.measureName')">
            <el-input v-model="setting.yName" :placeholder="$t('custom.component.gadget.lineYNamePlaceholder')" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.nameLocation')">
          <el-select v-model="setting.yAxisNameLocation" style="width:80%;">
            <el-option label="start" value="start"></el-option>
            <el-option label="center" value="center"></el-option>
            <el-option label="end" value="end"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.nameGap')">
            <el-input v-model="setting.yAxisNameGap" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item>
              <el-checkbox v-model="setting.yAxisPercentage">{{$t('custom.component.gadget.yAxisPercentage')}}</el-checkbox>
        </el-form-item>
        <el-form-item>
              <el-checkbox @change="changeRightYaxis" v-model="setting.showYaxisRight">{{$t('custom.component.gadget.showYaxisRight')}}</el-checkbox>
        </el-form-item>
        <el-form-item  v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.useRightyAxis')">
          <el-select v-model="setting.useRightyAxis" multiple  clearable  collapse-tags :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.showYaxisRightLabel')">
            <el-input v-model="setting.YaxisRightLabel" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.yAxismin')">
            <el-input v-model="setting.yAxismin" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.yAxismax')">
            <el-input v-model="setting.yAxismax" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item v-if="setting.showYaxisRight">
              <el-checkbox v-model="setting.rightyAxisPercentage">{{$t('custom.component.gadget.rightyAxisPercentage')}}</el-checkbox>
        </el-form-item>
         <el-form-item :label="$t('custom.component.gadget.axisLabelRotate')">
            <el-input v-model="setting.axisLabelRotate" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item label="yAxis Value">
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="Min">
                <el-input v-model="setting.yAxisValueMin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Max">
                <el-input v-model="setting.yAxisValueMax"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Interval">
                <el-input v-model="setting.yAxisValueInterval"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
              <el-checkbox v-model="setting.connectNulls">{{$t('custom.component.gadget.connectNulls')}}</el-checkbox>
        </el-form-item>
          <el-form-item>
            <el-checkbox v-model="setting.splitLineShow">{{$t('custom.component.gadget.splitLineShow')}}</el-checkbox>
        </el-form-item>
          <el-form-item>
            <el-checkbox v-model="setting.showlabel">{{$t('custom.component.gadget.showlabel')}}</el-checkbox>
        </el-form-item>
        <!-- <el-form-item :label="$t('custom.component.gadget.lineGridHeight')">
            <el-input v-model="setting.gridHeight" :placeholder="$t('custom.component.gadget.lineTitlePlaceholder')" style="width:80%;"></el-input>
        </el-form-item>
         <el-form-item :label="$t('custom.component.gadget.lineGridTop')">
            <el-input v-model="setting.gridTop" :placeholder="$t('custom.component.gadget.lineGridTopPlaceholder')" style="width:80%;"></el-input>
        </el-form-item> -->
        <el-form-item label="Area">
          <el-checkbox v-model="setting.area">Stacked Area Style</el-checkbox>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>

export default {
  name: 'LineSetting',
  components: { },
  data () {
    return {
      dataSource: [],
      predefineColors: [
        '#ffebe6',
        '#fffae6',
        '#e3fcef',
        '#e6fcff',
        '#deebff',
        '#eae6ff',
        '#ff0000',
        '#ffff00',
        '#008000'
      ],
      trendLineList: ['linear', 'exponential', 'polynomial'],
      setting: {
        type: 'Line',
        xName: 'Default X',
        yName: 'Default Y',
        yAxisNameLocation: 'end',
        yAxisNameGap: 10,
        goal: '',
        goalcolor: '#5470c6',
        gridHeight: '85%',
        gridTop: '11%',
        smooth: false,
        showYaxisRight: false,
        YaxisRightLabel: '',
        yAxismax: null,
        yAxismin: null,
        yAxisValueMin: null,
        yAxisValueMax: null,
        yAxisValueInterval: null,
        rightyAxisPercentage: false,
        useRightyAxis: [],
        name: '',
        nameTextStyle: {
          align: 'left'
        },
        title: '',
        valueFieldsNameMeasureX: 'x',
        valueFieldsNameMeasureY: 'y',
        valueFieldsNameMeasureGroup: null,
        valueFieldsNameManyY: [],
        manyMeasure: false,
        isCumulative: false,
        drillThroughStatus: true,
        primaryXAxis: {
          title: 'Title',
          valueType: 'Category',
          // labelFormat: 'MM/dd',
          // intervalType: 'Days',
          // edgeLabelPlacement: 'Shift',
          labelIntersectAction: 'Rotate45',
          majorGridLines: {
            width: 0
          }
        },
        primaryYAxis: {
          title: 'Count',
          labelFormat: '{value}',
          rangePadding: 'None',
          minimum: 0,
          maximum: 500,
          interval: 100,
          lineStyle: {
            width: 0
          },
          majorTickLines: {
            width: 0
          },
          minorTickLines: {
            width: 0
          }
        },
        chartArea: {
          border: {
            width: 0
          }
        },
        marker: {
          visible: true,
          height: 10,
          width: 10
        },
        tooltip: {
          enable: true
        },
        headerTitle: '',
        headerDescription: '',
        yAxisPercentage: false,
        axisLabelRotate: 315,
        showTrendLine: '',
        connectNulls: false,
        splitLineShow: false,
        showlabel: true,
        area: false
      }
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    'setting.valueFieldsNameMeasureGroup' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    },
    'setting.manyMeasure' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    },
    data (value, oldValue) {
      return this.updateSetting(value)
    },
   
  },
  computed: { },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    changeRightYaxis () {
      this.setting.YaxisRightLabel = ''
      this.setting.useRightyAxis = []
      this.setting.rightyAxisPercentage = false
    },
    groupChange (val) {
      if (val) {
        this.setting.valueFieldsNameManyY = []
        this.setting.manyMeasure = false
        this.setting.isCumulative = false
        this.setting.valueFieldsNameMeasureGroup = val
      } else {
        this.setting.valueFieldsNameMeasureGroup = null
      }
      this.$forceUpdate()
    },
    changeManyMeasure (val) {
      if (val) {
        this.setting.valueFieldsNameMeasureY = ''
        this.setting.valueFieldsNameManyY = []
      } else {
        this.setting.valueFieldsNameManyY = []
      }
      this.$forceUpdate()
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      // let temp = []
      this._.merge(this.setting, value.gadgetSetting)
      if (!this.setting.manyMeasure) {
        if (this.setting.valueFieldsNameManyY && this.setting.valueFieldsNameManyY.length > 0) {
          this.setting.manyMeasure = true
        } else {
          this.setting.manyMeasure = false
        }
      }
      if (!this.setting.valueFieldsNameMeasureGroup) {
        this.setting.valueFieldsNameMeasureGroup = null
      }
     
      this.$emit('update:data', this.setting)
    }

  }
}
</script>


